<template>
  <!-- 资料完善弹窗 -->
  <el-dialog
    title="资料完善"
    :visible.sync="dialogVisible"
    v-dialogDrag
    :close-on-click-modal="false"
    :before-close="cancel"
    class="m-supplierInfo-perfect"
    v-loading="loading"
  >
    <el-form label-width="100px" :rules="rules" ref="ruleForm" :model="ruleForm">
      <el-form-item label="编号" prop="supplierCode">
        <el-input placeholder="供应商编码" v-model="ruleForm.supplierCode" disabled></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="supplierName">
        <el-input placeholder="供应商名称" v-model="ruleForm.supplierName" auto-complete="off" disabled></el-input>
      </el-form-item>
      <el-form-item label="电子签状态" prop="isESign">
        <el-select v-model="ruleForm.isESign" placeholder="请选择" disabled>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="签章人姓名" prop="linkMan">
        <el-input
          placeholder="请输入签章人姓名"
          v-model="ruleForm.linkMan"
          maxlength="50"
          auto-complete="off"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="签章人邮箱" prop="mail">
        <el-input
          placeholder="请输入邮箱"
          type="mail"
          v-model="ruleForm.mail"
          auto-complete="off"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="签章人微信" prop="weChatNo">
        <el-input
          placeholder="请输入微信号"
          type="mail"
          v-model="ruleForm.weChatNo"
          auto-complete="off"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="签章人手机" prop="linkNumber" :class="{'last-item':phoneTips}">
        <el-input
          placeholder="请输入签章人手机"
          type="phone"
          v-model="ruleForm.linkNumber"
          auto-complete="off"
          clearable
          :disabled="ruleForm.isESign!=0"
        ></el-input>
      </el-form-item>
      <span class="tips" v-show="phoneTips">(注：电子签章短信验证号码，请谨慎填写)</span>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveInfo" :loading="loading">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import constant from "@/public/constant";
import _Api from "@/api";
import Msg from "@/public/message";

export default {
  data () {
    let vaildPhone = (rule, value, callback) => {
      let reg = /^1(3[0-9]|4[0-9]|5[0,1,2,3,5,6,7,8,9]|6[0-9]|7[0-9]|8[0-9]|9[0-9])\d{8}$/;
      if (!reg.test(value)) {
        this.phoneTips = false
        callback(new Error("请输入11位符合要求的手机号码"));
      }
      else {
        this.phoneTips = true
        callback();
      }
    }
    let validEmail = (rule, value, callback) => {
      if (value) {
        var reg = new RegExp("^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$");
        if (!reg.test(value)) {
          this.emailTips = false
          callback(new Error("请输入正确的邮箱地址"));
        } else {
          callback()
        }
      } else {
        callback()
      }
    };
    return {
      // 表单内容
      ruleForm: {
        linkMan: "",
        linkNumber: "",
        supplierCode: '',
        supplierName: '',
        isESign: '',
        mail: '',
        weChatNo: ''
      },
      // 签单状态
      options: [
        { label: '未注册', value: 0 },
        { label: '认证中', value: 1 },
        { label: '认证通过', value: 2 }
      ],
      // 验证规则
      rules: {
        linkMan: [
          { required: true, trigger: "blur", message: '请输入签章姓名' },
          { min: 1, max: 50, message: '最大输入50个字符！', trigger: 'blur' }
        ],
        linkNumber: [
          { required: true, trigger: "blur", validator: vaildPhone }
        ],
        mail: [
          { required: false, trigger: "blur", validator: validEmail }
        ]
      },
      // 供应商信息
      supplierInfo: {},
      loading: false,
      phoneTips: true
    };
  },
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  mounted () {
    if (constant.accountType == 4) {
      this.getSupplierInfo()
    }
  },
  methods: {
    // 获取供应商信息
    getSupplierInfo () {
      let obj = {
        "mainAccount": constant.account
      }
      this.loading = true
      _Api.getSupplierDetailByAccount(obj).then(res => {
        let data = res.data
        this.loading = false
        if (data.code == 1) {
          this.supplierInfo = data.rows[0];
          const { linkMan, isESign, supplierCode, supplierName, linkNumber, mail, weChatNo } = this.supplierInfo
          this.ruleForm = {
            linkMan,
            isESign,
            supplierCode,
            supplierName,
            linkNumber,
            mail,
            weChatNo
          }
        } else {
          this.$alert(data.info, {
            showClose: false,
            confirmButton: "确定",
            customClass: "alertFailure"
          })
        }
      }).catch(err => {
        this.loading = false
        this.$alert(err.data.message, {
          showClose: false,
          confirmButton: "确定",
          customClass: "alertFailure"
        })
      })
    },
    // 保存供应商资料
    saveInfo () {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          const { linkMan, linkNumber, mail, weChatNo } = this.ruleForm
          let params = {
            ...this.supplierInfo,
            linkMan,
            linkNumber,
            mail,
            weChatNo
          }
          this.loading = true
          _Api.modifySupplier(params).then(res => {
            let data = res.data
            this.loading = false
            if (data.code == 1) {
              this.$store.state.supplyChainFinance.custInf.mail = mail;
              this.$store.state.supplyChainFinance.custInf.weChatNo = weChatNo;
              Msg.showSuccessMsg('资料保存成功！')
              this.cancel()
            } else {
              this.$alert(data.info, {
                showClose: false,
                confirmButton: "确定",
                customClass: "alertFailure"
              })
            }
          })
            .catch(err => {
              this.loading = false
              this.$alert(err.data.message, {
                showClose: false,
                confirmButton: "确定",
                customClass: "alertFailure"
              })
            })
        }
      })
    },
    // 关闭弹窗
    cancel () {
      this.$emit('closeDialog')
    }
  }
};
</script>

<style>
</style>